<template>
    <div class="lin_navbar">
      <div class="lin_navbar_list lin_display_flex">
        <div class="lin_navbar_list_left lin_display_flex_between">
          <Menu
              @click="toggleMenu"
              v-if="isOpenMenu"
              class="lin_navbar_menu"
          />
          <div class='lin_logo'>
            <a>
              <nuxt-link to="/">
                <img src="/%20assets/static/images/logo.png">
              </nuxt-link>
            </a>
          </div>
          <div>
            <SearchBar/>
          </div>
        </div>
        <div class="lin_navbar_list_right lin_display_flex_between">
          <div class="lin_listing_options"
               v-if="showNavBarList"
          >
            <ul class="lin_flex_options_ul">
              <li>
                <nuxt-link to="/">
                  <a>Explore</a>
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/designer">
                  <a>Designer</a>
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/about">
                  <a>About</a>
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/blog">
                  <a>Blog</a>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <div class="lin_navbar_login lin_display_flex_evenly"
               v-show="isOpenLogin"
          >
            <div class="lin_navbar_login_up_button">
              <nuxt-link to="/login">
                <a href="/">Sign up</a>
              </nuxt-link>
            </div>
            <div class="lin_navbar_login_button">
              <LoginButton/>
            </div>
          </div>
        </div>
      </div>
    </div>
  <DropMenu
      v-model:isOpen="isOpen"
  />
</template>

<script lang="ts">
import { useWindowStore } from '~/stores/pinia/useWindowStore';
import {defineComponent, ref} from "vue";
import LoginButton from "~/ components/button/LoginButton.vue";
import SearchBar from "~/ components/SearchBar.vue";
import Menu from "~/ components/button/Menu.vue";
import DropMenu from "~/ components/DropMenu.vue";


export default defineComponent({
  components: {Menu, SearchBar, LoginButton, DropMenu},
  setup() {
    const windowStore = useWindowStore();
    const showNavBarList = ref(false);
    const isOpen = ref(false); // 控制菜单的开关
    const isOpenMenu = ref(false);
    const isOpenLogin = ref(true);


    const navBarDisplayed = async() => {
      const Yes_or_No = windowStore.checkWindowSize()
      showNavBarList.value = !Yes_or_No;
      isOpenMenu.value = Yes_or_No;
      isOpenLogin.value = window.innerWidth > 700;
      if(window.innerWidth >= 970){
        if(isOpen.value){
          isOpen.value = false;
        }
      }

    }


    const toggleMenu = () => {
      isOpen.value = !isOpen.value; // 切换菜单的显示状态
    };

    onMounted(() => {
      navBarDisplayed();
      window.addEventListener('resize', navBarDisplayed);
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', navBarDisplayed);
    });

    return {
      showNavBarList,
      windowWidth: windowStore.windowWidth,
      isOpen,
      isOpenMenu,
      isOpenLogin,
      toggleMenu,
    }
  }

})
</script>

<style scoped lang="scss">

.lin_navbar_list {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid rgb(223, 222, 222);
  z-index: 1;
  background: white;
}

.lin_navbar_menu {
  padding-right: 30px;
  left: 0;
}

.lin_navbar_list_left {
  position: absolute;
  left: 100px;
}


.lin_flex_options_ul li {
  margin-right: 30px;
}

.lin_flex_options_ul li:last-child,
.lin_navbar_login div:last-child {
  margin-right: 0; /* 去掉最后一个列表项的右间隔 */
}

.lin_navbar_login{
  position: absolute;
  right: 100px;
}
.lin_logo {
  margin-right: 30px;
}
.lin_logo img{
  height: 50px;
  width: 50px;
}

.lin_navbar_login div {
  margin-right: 20px;
}
.lin_navbar_login_up_button:hover a {
    color: gray;
}



</style>